<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完成加载过程
var echarts = require('echarts')
import { getPie } from '@/http/homeData.js'

export default {
  // 页面渲染完毕事件
  async mounted() {
    const res = await  getPie()
      console.log(res);
      Object.keys(res.data).forEach((item) => {
        this.data.push({
          value: res.data[item],
          name: item,
        })
      })
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
        textStyle: {
          color: "#7a869a",
        },
      },
      series: [
        {
          name: "Data",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#ffffff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: this.data,
          color: ["#78aaf2", "#aed1f7", "#c3dcf8", "#e4f1fc", "#b4c9ef"],
        },
      ],
    })
  },
  data() {
    return {
      data: [],
      waterIntake: []
    }
  },
  methods: {

  },
}
</script>

<style>
.radar-echart {
  width: 100%;
  height: 400px;
}
</style>
